import 'package:baselib/util/common_utils.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/controller/SplashControl.dart';
import 'package:flutter_app/login/webviewpage.dart';
import 'package:flutter_app/util/colours.dart';
import 'package:get/get.dart';

class loginDialog extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new loginDialogState();
  }

}

class loginDialogState extends State<loginDialog> {

  final SpalshController control = SpalshController.to;
  ///账号的控制器
  TextEditingController usernameController = TextEditingController();
  ///密码的控制器
  TextEditingController passController = TextEditingController();

  ///手机号的控制器
  TextEditingController phoneController = TextEditingController();
  ///code的控制器
  TextEditingController codeController = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    usernameController.addListener(() {

    });
    passController.addListener(() {

    });


    phoneController.addListener(() {

    });
    codeController.addListener(() {

    });

  }

  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(4),
            shape: BoxShape.rectangle),
        child:Column(
          children: [
            _buildBar(context),
            Container(
              alignment: Alignment.topCenter,
              child: Image.asset(
                CommonUtils.getImgPath("logo.png"),
                height: 50,
              ),
            ),
            _buildEdit(context),

          ],
        )
    );
  }


  ///输入框
  _buildEdit(context) =>
      Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            buildThree(),
            Obx(()=>control.isPhonePasswordLogin.isTrue
                ? _setupPassLoginFields()
                : _setupSmsLoginFields()),
            SizedBox(height: 10,),
            buildXieyi(),
            SizedBox(height: 10,),
            buildLoginBtn(),
            SizedBox(height: 10,),
            buildwx()
          ],
        ),
      );


  ///微信登录
  Widget buildwx(){
    return GestureDetector(
      onTap:  (){
        Get.back();
        showDialog(context: context,barrierDismissible:false,
            builder: (ctx)=>control.buildWxDialog());
      },
      child: Container(
        margin: EdgeInsets.only(left: 20),
        child: Row(
          children: [
            Image.asset(CommonUtils.getImgPath("wxl.png")),
            Text("微信登录",style: TextStyle(color: ColourRes.app_1A4677),)
          ],
        ),
      ),
    );
  }

  /// tab 栏
  Widget buildThree() {
    return Container(
      margin: EdgeInsets.only(left: 20, top: 5),
      child: Row(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              control.isPhonePasswordLogin.value= true;
            },
            child: Container(
              alignment: Alignment.centerLeft,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Obx(()=>Text(
                    "账号登录",
                    style: TextStyle(
                        color: control.isPhonePasswordLogin.value
                            ? ColourRes.app_1A4677
                            : ColourRes.app_8A8C99,
                        fontSize: control.isPhonePasswordLogin.value
                            ? 14
                            :14),
                  )),
                  SizedBox(height: 5,),
                  Obx(()=>Visibility(
                    visible: control.isPhonePasswordLogin.value,
                    child: Container(
                      width: 30,
                      height: 2,
                      decoration: BoxDecoration(
                          color: ColourRes.app_1A4677,
                          shape: BoxShape.rectangle),
                    ),
                  ))
                ],
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              control.isPhonePasswordLogin.value = false;
            },
            child: Container(
              alignment: Alignment.center,
              padding: EdgeInsets.only(left: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Obx(()=>Text(
                    "手机验证登录",
                    style: TextStyle(
                        color: control.isPhonePasswordLogin.value
                            ? ColourRes.app_8A8C99
                            : ColourRes.app_1A4677,
                        fontSize:control.isPhonePasswordLogin.value
                            ? 14
                            : 14),
                  )),
                  SizedBox(height: 5,),
                  Obx(()=>Visibility(
                    visible: !control.isPhonePasswordLogin.value,
                    child: Container(
                      width: 30,
                      height: 2,
                      decoration: BoxDecoration(
                          color: ColourRes.app_1A4677,
                          shape: BoxShape.rectangle),
                    ),
                  ))
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  ///密码登录输入框
  _setupPassLoginFields() {
    return Container(
      padding: EdgeInsets.only(
          top: 30,
          left: 26,
          right: 26),
      child: Column(
        children: <Widget>[
          TextField(
            controller: usernameController,
            autocorrect: true,
            //是否自动更正
            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
            //允许的输入格式
            style: new TextStyle(
                color: Colors.black, fontSize: 15),
            decoration: InputDecoration(
              icon: Image.asset(
                CommonUtils.getImgPath("phone_icon.png"),
                height:20,
              ),
              hintText: "请输入账号",
              hintStyle: new TextStyle(
                  color: ColourRes.app_A8A7A5,
                  fontSize: 15),
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              errorText:control.loginPassErrortext.value,
            ),
            onChanged: (str) {
              control.userName.value = str;
              if(str.isNotEmpty) {
                control.loginPassErrortext.value= null;
              }else{
                control.loginPassErrortext.value = "账号不能为空";
              }
            },
          )
          ,
          Divider(height: 1, color: ColourRes.app_E6E6E6),
          Row(
            children: <Widget>[
          Expanded(
          child:
          TextField(
            controller: passController,
            obscureText:control.showPassWord.value,
            style: new TextStyle(
                color: Colors.black,
                fontSize: 15),
            decoration: InputDecoration(
                icon: Image.asset(
                  CommonUtils.getImgPath("password_icon.png"),
                  height: 20,
                ),
                hintText: "请输入密码",
                hintStyle: new TextStyle(
                    color: ColourRes.app_A8A7A5,
                    fontSize: 15),
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                errorText:control.loginPassWordErrortext.value
            ),
            onChanged: (str) {
              control.userPassWord.value = str;
              if(str.isNotEmpty){
                control.loginPassWordErrortext.value=null;
              }else{
                control.loginPassWordErrortext.value="密码不能为空";
              }
            },
          )
          ,
          ),
              Obx(()=>IconButton(
                  onPressed: () {
                    control.showPassWord.value = !control.showPassWord.value;
                  },
                  icon: control.showPassWord.value
                      ? Image.asset(
                      CommonUtils.getImgPath("yingcang.png"),
                      height: 20)
                      : Image.asset(CommonUtils.getImgPath("eye.png"),
                      height: 20)))
            ],
          ),
          Divider(height: 1, color: ColourRes.app_E6E6E6),
        ],
      ),
    );
  }

  ///短信登录输入框
  _setupSmsLoginFields() {
    return Container(
      padding: EdgeInsets.only(
          top: 30,
          left: 26,
          right: 26),
      child: Column(
        children: <Widget>[
          TextField(
            controller: phoneController,
            autocorrect: true,
            //是否自动更正
            inputFormatters: [FilteringTextInputFormatter.digitsOnly],
            //允许的输入格式
            style: new TextStyle(
                color: Colors.black, fontSize: 15),
            decoration: InputDecoration(
              icon: Image.asset(
                CommonUtils.getImgPath("phone_icon.png"),
                height: 20,
              ),
              hintText: "请输入手机号",
              hintStyle: new TextStyle(
                  color: ColourRes.app_A8A7A5,
                  fontSize: 15),
              border: InputBorder.none,
              focusedBorder: InputBorder.none,
              errorText: control.loginSmsErrortext.value
            ),
            onChanged: (str) {
              control.userPhone.value = str;
              if(str.isNotEmpty) {
                control.loginSmsErrortext.value= null;
              }else{
                control.loginSmsErrortext.value = "手机号不能为空";
              }
            },
          ),
          Divider(height: 1, color: ColourRes.app_E6E6E6),
          Row(
            children: <Widget>[
              Expanded(
                child: TextField(
                  controller: codeController,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                  obscureText: false,
                  style: new TextStyle(
                      color: Colors.black,
                      fontSize: 15),
                  decoration: InputDecoration(
                    icon: Image.asset(
                      CommonUtils.getImgPath("password_icon.png"),
                      height: 20,
                    ),
                    hintText: "请输入验证码",
                    hintStyle: new TextStyle(
                        color: ColourRes.app_A8A7A5,
                        fontSize: 15),
                    border: InputBorder.none,
                    focusedBorder: InputBorder.none,
                    errorText: control.loginSmsPassWordErrortext.value
                  ),
                  onChanged: (str) {
                    control.userSmsCode.value = str;
                    if(str.isNotEmpty){
                      control.loginSmsPassWordErrortext.value=null;
                    }else{
                      control.loginSmsPassWordErrortext.value="验证码不能为空";
                    }
                  },
                ),
              ),
              GestureDetector(
                onTap: () {
                  if(control.start.value==120) {
                    control.getSmsCode(context);
                  }
                },
                child: Obx(()=>Text(control.start.value == 120 ? "获取验证码" : "${control.start.value}s",
                    style: new TextStyle(
                        color: control.start.value == 120 ? ColourRes
                            .app_6E7C8C : Color(0xffF2502C),
                        fontSize: 12))),
              )
            ],
          ),
          Divider(height: 1, color: ColourRes.app_E6E6E6),
        ],
      ),
    );
  }

  ///登录按钮
  Widget buildLoginBtn() {
    return Center(
      child: Container(
        width: 250,
        height: 50,
        child: TextButton(
          child: Text("确定",
              style: new TextStyle(
                  color: ColourRes.app_1A4677, fontSize: 18)),
          style: ButtonStyle(
              backgroundColor:MaterialStateProperty.all(Color(0xffF1F8FF)),
              shape: MaterialStateProperty.all(RoundedRectangleBorder(
                  side: BorderSide(color: ColourRes.app_1A4677),
                  borderRadius: BorderRadius.all(
                      Radius.circular(4))))
          ),
          onPressed: () {
            control.loginByPass(context);
          },
        ),
      ),
    );
  }

  ///协议
  Widget buildXieyi() {
    return Container(
      width: 480,
      padding: EdgeInsets.only(
          top: 1,
          left: 15,
          right: 26),
      child: Row(
        children: <Widget>[
          GestureDetector(
            onTap: () {
              //Get.to(WebViewPage());
              Get.to(WebViewPage(), preventDuplicates: false);
              // Navigator.of(context).push(
              //   MaterialPageRoute(
              //     builder: (BuildContext context) {
              //       return WebViewPage();
              //     },
              //   ),
              // );
            },
            child: Container(
              child: Row(
                children: <Widget>[
                 Obx(()=> control.isKnown.value ? Image.asset(
                   CommonUtils.getImgPath("cb_select.png"),
                   height: 20,) :
                 Image.asset(CommonUtils.getImgPath("cb_not_select.png"),
                     height:20)),
                  Text(
                    "我已阅读并同意",
                    style: TextStyle(
                        color: Color(0xff262745),
                        fontSize: 12),
                  ),
                  Text(
                    "《易车车用户协议》",
                    style: TextStyle(
                        color: ColourRes.app_1A4677,
                        fontSize: 12),
                  )
                ],
              ),
            ),
          ),
          Spacer(),
          InkWell(
            onTap: (){
              Get.back();
              showDialog(context: context,barrierDismissible:false,
                  builder: (ctx)=>control.buildForgetpassDialog());
            },
            child:Container(
              child: Text(
                "忘记密码？",
                style: TextStyle(
                    color: Color(0xff262745),
                    fontSize: 12),
              ),
            ),
          )
        ],
      ),
    );
  }


  ///关闭按钮
  _buildBar(context) =>
      Container(
        height: 30,
        alignment: Alignment.centerRight,
        margin: EdgeInsets.only(right: 10, top: 5),
        child: InkWell(
          onTap: () => Navigator.pop(context),
          child: Icon(
            Icons.close,
            color: Color(0xffD8D8D8),
          ),
        ),
      );
}